import React, {useEffect} from 'react'
import {connect} from 'react-redux'
import {Button, Col, Row} from 'reactstrap'
import {RefreshCw} from "react-feather"
import AnalyticsCards from "./AnalyticsCards";
import Statistics from "./statistics"
import {getAnalyticsData, getProjectList} from "../../../redux/actions/analytics";
import {setData} from '../../../redux/actions/helper'
import SelectDay from '../../../components/pages/analytics/SelectDay'
import {deepCompare2Object} from '../../../helpers/utils'
import SelectProject from "../../../components/general/SelectProject";
import {
  CLEAR_ALL_ANALYTICS_STATE,
  SET_ANALYTICS_SELECTED_PROJECT,
  SET_ANALYTICS_REQ_PARAMS
} from '../../../redux/constants/analytics'
import '../../../assets/scss/pages/analytics.scss'
import FullSpinnerDimming from "../../../components/@vuexy/spinner/Full-spinner-dimming";

const Analytics = (props) => {

  const involvement = () => {
    if (props.analytics && props.analytics.amount && props.followers && props.followers.followers[props.followers.followers.length - 1]) {
      let comments = (props.analytics.amount.comments)
      let likes = (props.analytics.amount.likes)
      let reposts = (props.analytics.amount.reposts)
      let followers = (props.followers.followers[props.followers.followers.length - 1])
      let dayCount = props.requestParams ? (props.requestParams.limit) : 7
      return ((((comments + likes + reposts) / followers) * 100) / dayCount).toFixed(2)
    } else {
      return 0
    }
  }

  const getData = () => {
    props.getAnalyticsData(
      props.requestParams,
      props.statisticsRequestParams,
      props.followersRequestParams,
      props.selectedProject
    )

  }

  useEffect(() => {
    props.getProjectList(props.projectRequestParams, props.selectedProject)
    return () => {
      props.setData(CLEAR_ALL_ANALYTICS_STATE)
    }
  }, [])

  useEffect(() => {
    if (props.selectedProject.id)
      getData()
  }, [props.requestParams])

  const selectProjectOnChange = (e) => {
    props.setData(SET_ANALYTICS_REQ_PARAMS, {"group_id": e.group_id})
    props.setData(SET_ANALYTICS_SELECTED_PROJECT, e)
  }

  return (
    <div className="page-container analytics-container">
      {props.spinner.includes('analytics') && <FullSpinnerDimming/>}
      <div className="page-content-header">
        <Row>
          <Col sm="12" md="2" xl="3">
            <h2 className="content-title float-left mb-0">
              Аналитика
            </h2>
          </Col>
          <Col sm="12" md="10" xl="9"
               className="d-sm-flex flex-column flex-sm-row justify-content-end mt-sm-1 mt-md-0">
            <div className="analytics-select-project pl-md-3 pl-lg-0 mt-1 mt-sm-0">
              <SelectProject
                maxMenuHeight={250}
                className="analytics-select"
                projectList={props.projectsList}
                requestParams={props.requestParams}
                setData={props.setData}
                selectedProject={props.selectedProject}
                onChange={selectProjectOnChange}
                isGetProjects={false}
              />
            </div>
            <div className="analytics-select-limit mt-1 mt-sm-0">
              <SelectDay
                className="analytics-select"
                requestParams={props.requestParams}
                setData={props.setData}
                selectedCountDay={props.selectedCountDay}
              />
            </div>
            <div className="analytics-update-button mt-1 mt-sm-0">
              <Button.Ripple
                color="danger"
                className="analytics-update-btn d-flex align-items-center justify-content-center"
                onClick={() => getData()}
              >
                <RefreshCw className="btn-icon" size={14}/>
                Обновить
              </Button.Ripple>
            </div>
          </Col>
        </Row>
      </div>

      <AnalyticsCards
        analytics={props.analytics}
        percentData={props.percentData}
        analyticsStatus={props.analyticsStatus}

      />

      <Statistics
        involvement={involvement()}
        statistics={props.statistics}
        followers={props.followers}
        spotify={props.spotify}
      />

    </div>


  )
}

const mapStateToProps = state => {
  return {
    statisticsRequestParams: state.analytics.statisticsRequestParams,
    followersRequestParams: state.analytics.followersRequestParams,
    requestParams: state.analytics.analyticsRequestParams,
    selectedCountDay: state.analytics.selectedCountDay,
    projectRequestParams: state.projects.requestParams,
    analyticsStatus: state.analytics.analyticsStatus,
    selectedProject: state.analytics.selectedProject,
    percentData: state.analytics.percentData,
    statistics: state.analytics.statistics,
    spotify: state.analytics.spotify,
    analytics: state.analytics.analytics,
    followers: state.analytics.followers,
    countDay: state.analytics.countDay,
    group_id: state.analytics.group_id,
    projectsList: state.projects.list,
    spinner: state.helper.spinner,
  }
}

export default connect(mapStateToProps, {
  setData,
  getAnalyticsData,
  getProjectList
})(Analytics)
